<template>
  <div>
       <div class="title">
       <p class="iconfont icon-bg-left" @click="handleBack"></p>
       <p>光与影</p>
       <p class="iconfont icon-shenglvehao"></p>
     </div>
    <div class="search">
       <p class="iconfont icon-sousuo"></p>
       <input type="text"  v-model="value" @keyup.enter="handleKeyup" placeholder="釜山行,夏有乔木仰望天堂">
    </div>
      

    <div class="item">
          <img class="item_img" :src="data.pic" alt="">
          <p>{{data.title}}</p>
     
          <div class="footer">
          <div class="car" v-for="(value,index) of count" :key="index">
                  <img  v-if="value>=1.5" src="./images/star.png" alt="">
                  <img  v-else-if="value>=0.5" src="./images/baba.png" alt="">
                  <img  v-else src="./images/chat.png" alt="">
          </div>
          <p>{{data.rating}}{{data.raiting}}</p>
          </div>
      </div>

  </div>


</template>

<script>

export default {
      data(){
        return{
          data:[],
          value:'',
          count:[]
        }
      },
      methods:{
        handleKeyup(){
          var key=this.value
          this.$http(`http://47.108.197.28:4000/api/search?keyword=${key}`).then(res=>{
            console.log(res);
            if(res.data.res[0].raiting){
             var count=this.getArrayStr(res.data.res[0].raiting)
            }else{
              count=this.getArrayStr(res.data.res[0].rating)
            }
           
          
           this.count=count
           this.data=res.data.res[0]
          })
        },
           getArrayStr(sum){
         var arr=[]
         for(var i=0;i<5;i++){
            
             if(sum>2){
               arr.push(2)
             }else if(sum>0){
               arr.push(Math.round(sum*10)/10)
             }else{
               arr.push(0)
             }
              sum=sum-2
         }
         return arr
       },
       handleBack(){
         this.$router.back()
       }
      },
      mounted(){
    
      }
}
</script>

<style scoped>
.title{
  height: 70px;
  width: 10rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgb(99, 131, 219);
}
.title p{
  font-size: 35px;
  color: white;
}
.search{
    width: 10rem;
  height: 80px;
  background-color: #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search p{
  width: 15%;
  text-align: center;
  font-size: 45px;
}
input{
  width: 85%;
  height: 100%;
  border: none;
  /* text-decoration: none; */
}

  .car img{
    width: 30px;
  }
.container{
    width: 10rem; 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.item{
    width: 2.9333rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item_img{
    width: 2.9333rem;
    height: 2.9333rem;
}
.footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>